<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/min.js"></script>
    <script src="../../static/js/xhr.js"></script>
    <style >
        *{margin: 0;
        padding:0}
        ul{
            overflow: hidden;
            width:365px;
        }
        li{
            list-style: none;
            float: left;
            width: 120px;
            text-align: center;
            border: solid 1px;
        }
    </style>
</head>
<body>
    <span id="content"></span>
    <button onclick="a()">发送xhr请求</button>
    <button id="btn">获取JQ的JSON对象</button>
    <ul id="first">
        <li>username</li>
        <li>password</li>
        <li>nickname</li>
    </ul>
    <div id="temp" style="display: none">发送中....</div>
</body>
    <script>
        var data=[{
            "name":"王老师",
            "password":"123456",
            "nickname":"王先生"
        },{
            "name":"王老师",
            "password":"123456",
            "nickname":"王先生"
        },
        {
            "name":"王老师",
            "password":"123456",
            "nickname":"王先生"
        }]
        /*
        $(text).each(function (index,obj){
            console.log(obj.username)
            console.log(obj.password)
            console.log(obj)

        })
         */
        {#1.原生的写法#}
        function a(){
            xhr=create_xhr()
            xhr.open("get",'/user/get_json_data',true)
            xhr.onreadystatechange=function (){
                if (xhr.status === 200 && xhr.readyState ===4){

                    var res=JSON.parse(xhr.responseText)
                    console.log(res)
                    $(res).each(function (index,elem){
                        $("#first").append($("<ul><li>"+elem.username+"</li><li>"+elem.password+"</li><li>"+elem.nickname+"</li></ul>"))
                    })
                }
            }
            xhr.send(null)
        }

{#        $(obj).load()#}

{#        #}
{#        $(function(){#}
{#            $("#btn").click(function (){#}
{#                $("#content").load('/user/get_json_data',function (){})#}
{#            })#}
{#        })#}

{#        .get方法 PS: post方法类似#}
{#        #}
{#        $(function(){#}
{#            $.get('/user/get_json_data',function(data){#}
{#                $("#content").text(JSON.stringify(data))#}
{#            },'json')#}
{#        })#}

        $(function (){
            $("#btn").click(function (){
                $.ajax({
                    url:"/user/get_json_data",
                    type:"get",
                    dataType:'json',
                    async:true,
                    success:function(data){
                        $(data).each(function (index,elem){
                        $("#first").append($("<ul><li>"+elem.username+"</li><li>"+elem.password+"</li><li>"+elem.nickname+"</li></ul>"))
                    });
                        $("#temp").hide(3000);
                        $("#btn").removeAttr("disabled");
                        
                    },
                    error:function(){
                        alert("server is busy")
                    },
                    beforeSend:function (){
                        $("#temp").show()
                        $("#btn").attr("disabled","disabled")


                    }
                })
            })
        })


    </script>
</html>